<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监视(watch)</title>
  </head>

  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <h1>姓:<input type="text" v-model="firstName"></h1>
      <h1>名:<input type="text" v-model="lastName"></h1>
      <h1>姓名：{{fullName}}</h1>
      <h1>全名:<input type="text" v-model="fullName"></h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 

    一.监视属性：
      1.当被监视的属性变化时，回调函数自动调用，进行相关操作
      2.属性必须存在，才能进行监视
      3.监视的两种方法：
        3.1 new Vue时传入watch配置
        3.2 通过vm.$watch监视
    二.computed和watch之间的区别：
      1.只要是computed能完成的操作，watch都可以完成
      2.watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作
    三.备注
      1.所有被vue管理的函数，都不要使用箭头函数，例如：例如watch，computed中
      2.所有不是被vue管理函数，都要写成箭头函数，例如：定时器，aJax

    */

    const vm = new Vue({
      el: "#app",
      data: function () {
        return {
          message: 'Vue',
          firstName: '李',
          lastName: '四',
          fullName: ''
        }
      },
      watch: {

        // 一.函数写法—— 精简写法
        // firstName(newValue, oldValue) { //监视谁，就把谁写成函数
        //   // 1. firstName什么时候调用？ 只要data里的firstName被改变就会被调用
        //   console.log("firstName被调用了", newValue, oldValue);
        //   this.fullName = newValue + '-' + this.lastName
        // },

        // 二.对象写法—— 对象写法
        firstName: {
          immediate: true, //若immediate为true，则handler在初始化的时候就会调用一次
          handler(newValue, oldValue) {
            this.fullName = newValue + '-' + this.lastName
          }
        },

        lastName(newValue, oldValue) {
          this.fullName = this.firstName + "-" + newValue
        }
      }
    })

    //三.watch的第二种写法
    vm.$watch("firstName", {
      immediate: true, //若immediate为true，则handler在初始化的时候就会调用一次
      handler(newValue, oldValue) {
        setTimeout(() => { //此处定时器的回调一定要用回调函数
          this.fullName = newValue + '-' + this.lastName
        }, 3000)
      }
    })
  </script>

</html>